<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>"一流攀大"年度综合考核测评系统</title>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <link rel="stylesheet" th:href="@{/static/css/login.css}">
</head>
<body style="background-image: url('static/images/back.jpg');background-size: 100%">

<div id="particles-js">
    <div class="login" style="display: block;">
        <div class="login-top">
            <center>"一流攀大"</center>
            <br>
            <center>年度综合考核测评系统</center>
        </div>
        <div class="login-center clearfix">
            <div class="login-center-img"><img th:src="@{/static/images/name.png}"></div>
            <div class="login-center-input">
                <input id="loginUsername" type="text" name="" placeholder="请输入您的用户名"
                       onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的用户名'">
                <div class="login-center-input-text">用户名</div>
            </div>
        </div>
        <div class="login-center clearfix">
            <div class="login-center-img"><img th:src="@{/static/images/password.png}"></div>
            <div class="login-center-input">
                <input id="loginPassword" type="password" name="" placeholder="请输入您的密码"
                       onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的密码'">
                <div class="login-center-input-text">密码</div>
            </div>
        </div>
        <div class="login-button">
            登录
        </div>
    </div>
    <div class="sk-rotating-plane"></div>
<!--    <canvas class="particles-js-canvas-el" width="1526" height="1298" style="width: 100%; height: 100%;"></canvas>-->
</div>

<!-- scripts -->
<script th:src="@{/static/layui.js}"></script>
<script th:src="@{/static/js/a.js}"></script>
<!--<script th:src="@{/static/js/login.js}"></script>-->
<script type="application/javascript">
    // function hasClass(elem, cls) {
    //     cls = cls || '';
    //     if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时，返回false
    //     return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
    // }
    //
    // function addClass(ele, cls) {
    //     if (!hasClass(ele, cls)) {
    //         ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
    //     }
    // }
    //
    // function removeClass(ele, cls) {
    //     if (hasClass(ele, cls)) {
    //         var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
    //         while (newClass.indexOf(' ' + cls + ' ') >= 0) {
    //             newClass = newClass.replace(' ' + cls + ' ', ' ');
    //         }
    //         ele.className = newClass.replace(/^\s+|\s+$/g, '');
    //     }
    // }

    // 校用户名、密码
    function validateCode(inputID, codeID) {
        var loginUsername = $('#loginUsername').val();
        var loginPassword = $('#loginPassword').val();
        if ($.trim(loginUsername) == '' || $.trim(loginUsername).length <= 0) {
            layer.alert("用户名不能为空");
            return false;
        }
        if ($.trim(loginPassword) == '' || $.trim(loginPassword).length <= 0) {
            layer.alert("密码不能为空");
            return false;
        }
        return true;
    }

    document.onkeydown = function(e) {
        if (!e)
            e = window.event;//火狐中是 window.event
        if ((e.keyCode || e.which) == 13) {
            login()
        }
    }

    document.querySelector(".login-button").onclick = login

    function login() {
        // addClass(document.querySelector(".login"), "active")
        if (!validateCode('#loginCard', '#loginCode')) {
            //阻断提示
            document.querySelector(".login").setAttribute("class", "login")
        } else {
            var loginUsername = $('#loginUsername').val();
            var loginPassword = $('#loginPassword').val();
            var account = encodeInp(loginUsername);
            var passwd = encodeInp(loginPassword);
            var encoded = account + "%%%" + passwd;
            var params = {};
            params.username = loginUsername;
            params.password = loginPassword;
            params.encoded = encoded;
            var loginLoadIndex = layer.load(2);

            $.ajax({
                type: 'post',
                url: window.location.protocol + '//' + window.location.host + '/user/login',
                dataType: 'html',
                data: JSON.stringify(params),
                contentType: 'application/json',
                success: function (data) {
                    layer.close(loginLoadIndex);
                    var jsonData = JSON.parse(data);
                    if (jsonData.data === true) {
                        window.location.href = 'show';
                    } else {
                        layer.alert(jsonData.msg)
                    }
                }
            });
            //
            // setTimeout(function () {
            //     addClass(document.querySelector(".sk-rotating-plane"), "active")
            //     document.querySelector(".login").style.display = "none"
            // }, 800)
            // setTimeout(function () {
            //     removeClass(document.querySelector(".login"), "active")
            //     removeClass(document.querySelector(".sk-rotating-plane"), "active")
            //     document.querySelector(".login").style.display = "block"
            //     $.ajax({
            //         type: 'post',
            //         url: window.location.protocol + '//' + window.location.host + '/user/login',
            //         dataType: 'html',
            //         data: JSON.stringify(params),
            //         contentType: 'application/json',
            //         success: function (data) {
            //             layer.close(loginLoadIndex);
            //             var jsonData = JSON.parse(data);
            //             if (jsonData.data === true) {
            //                 window.location.href = 'show';
            //             } else {
            //                 layer.alert(jsonData.msg)
            //             }
            //         }
            //     });
            // }, 1500)
        }
    }
</script>
</body>
</html>